//导入 Vue
import Vue from "vue";
//  导入 路由 插件，   VueRouter  构造函数
import VueRouter from "vue-router"

//使用路由
Vue.use(VueRouter);

//导入懒加载组件
const Home = ()=>import("@/pages/Home")
const Ref = ()=>import("@/pages/Ref")
const TodoList = ()=>import("@/pages/TodoList")
const Heros = ()=>import("@/pages/Heros")
const HeroCon = ()=>import("@/pages/HeroCon")
const Movie = ()=>import("@/pages/Movie")
const News = ()=>import("@/pages/News/News")
const GuoNei = ()=>import("@/pages/News/GuoNei")
const JunShi = ()=>import("@/pages/News/JunShi")
const Login = ()=>import("@/pages/Login")
const Vuex = () => import("@/pages/Vuex");

//创建 路由实例对象
 const router = new VueRouter({
    //配置 路由对象
    routes:[
        {
            path:"/home",   // 路由地址
            component:Home,  // 路由组件
            meta:{   // 路由元信息
                title:"首页",  // 导航标题
                isShow:true,  // 导航展示
                keepAlive:true // 需要被缓存
            }
                
        },
        {
            name:"vuex",   //命名路由
            path:"/vuex",   //路由地址
            component:Vuex,  //路由组件
            meta:{   //路由元信息
                title:"vuex",  //导航标题
                isShow:true,  //导航展示
                keepAlive:true  //需要被缓存
            }               
        },
        {
            path:"/ref",
            component:Ref,
            meta:{   //路由元信息
                title:"ref",
                keepAlive:true  //需要被缓存
            }
        },
        {
            path:"/todolist",
            component:TodoList,
            meta:{   //路由元信息
                title:"TodoList"
            }
        },
        {
            path:"/heros",
            component:Heros,
            meta:{   //路由元信息
                title:"英雄",
                isLogin:true  //是否要登录
            }
        },
        {
            name:"herocon",
            path:"/herocon/:id/:name?",
            component:HeroCon,
            meta:{   //路由元信息
                title:"英雄详情",
                isHidden:true
            },
            props:true,   //开启 props 配置,值为true，仅可以传递 params 参数
            beforeEnter(to,from,next){
                if(localStorage.getItem("token")){
                    if(from.path === "/heros"){
                        next()
                    }else{
                        next("/home");
                    }
                }else{
                    next("/login");
                }
            }
        },
        {
            path:"/movie",
            component:Movie,
            meta:{   //路由元信息
                title:"电影"
            }
        },
        {
            path: "/news",
            component: News,
            meta:{
                title:"新闻"
            },
            children:[
                {
                    path:"/news/guonei",
                    component:GuoNei
                },
                {
                    path:"/news/junshi",
                    component:JunShi
                },
                {
                    path:"",
                    component:GuoNei
                },
            ]
        },
        {
            path:"/login",
            name:"login",
            component:Login,
            meta:{
                title:"登录"
            }
        },
        {
            path:"*",   // * 代表所有路由地址
            redirect:"/home" ,  //路由重定向
            meta:{
                title:"404",
                isHidden:true  //是否隐藏
            }
        }
    ]  
})

// 全局前置路由守卫  beforeEach
router.beforeEach((to,from,next)=>{
    //to:  即将要进入的路由对象
    //from:  现在要离开的路由对象
    //next： 确认要进入的路由对象
    // console.log("to:  即将要进入的路由对象",to);
    // console.log("from:  现在要离开的路由对象",from);

    //判断路由对象
    if(to.meta.isLogin){
        if(localStorage.getItem("token")){
            //登录后放行
            next();
        }else{
            //未登录跳转值 login
            next({
                path: "/login",
                query:{
                    url: to.path
                }
            });
        }

    }else{
        //其他路由正常放行
        next();
    }
})

router.afterEach((to,from)=>{
    document.title = to.meta.title || "vue-cli--221208";
})

export default router